<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>遗传咨询详情</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">
    <!-- Morris -->
    <link href="css/plugins/morris/morris-0.4.3.min.css" rel="stylesheet">
    <!-- Gritter -->
    <link href="js/plugins/gritter/jquery.gritter.css" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">
    <link href="css/global.css" rel="stylesheet">
    <style>
        .iboxheaderBtn2IGV {
            background: -webkit-linear-gradient(#FEB683, #FF8993);
            background: -o-linear-gradient(#FEB683, #FF8993);
            background: -moz-linear-gradient(#FEB683, #FF8993);
            background: linear-gradient(#FEB683, #FF8993);
            padding: 0 .3rem;
            text-align: center;
        }
        .des{
            font-size: .14rem;
            color: #666;
        }
        .des div{
            font-size: .16rem;
            font-weight: bold;
        }
    </style>
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="manageTitle">
        <div class="manageTitleBack" onclick="javascript:history.back(-1);">
            <i class="fa fa-chevron-left"></i>
        </div>
        <span class="manageTitleText">遗传咨询详情</span>
        <div class="manageTitleRightIcon2">
            <img src="img/inport.png" alt="">
            <div>下载</div>
        </div>
    </div>
    <div class="ibox float-e-margins">
        <div class="ibox-content">
            <div class="floatClear iboxHeader">
                <div class="iboxheaderTab on">
                    All site 位点
                </div>
                <div class="iboxheaderTab">
                    遗传咨询详情
                </div>
            </div>
            <div class="tabContent on">
                <div class="floatClear iboxHeader">
                    <div class="iboxheaderBtn2 floatRight iboxheaderBtn2IGV">
                        IGV
                    </div>
                    <div class="iboxheaderBtn2 floatLeft">
                        <img src="img/screening.png" alt="">
                        筛选
                    </div>
                    <div class="floatLeft floatClear" style="line-height: .4rem;margin-right: .6rem;">
                        <div class="iboxHeaderDate floatRight">
                            <select style="width: 1.5rem" class="iboxSelect" name="" id="">
                                <option value="">请选择</option>
                            </select>
                        </div>
                    </div>
                    <!--<div class="floatLeft floatClear" style="line-height: .4rem;">-->
                        <!--<span style="color:#333">是否遗传咨询</span>-->
                        <!--<div class="iboxHeaderDate floatRight" style="margin-left: .1rem">-->
                            <!--<select style="width: 1.5rem" class="iboxSelect" name="" id="">-->
                                <!--<option value="">请选择</option>-->
                            <!--</select>-->
                        <!--</div>-->
                    <!--</div>-->
                    <!--<div class="iboxheaderBtn2 floatLeft">-->
                        <!--<img src="img/success.png" alt="">-->
                        <!--确定-->
                    <!--</div>-->
                    <a href="dnaManageRecordSheet.html">
                        <div class="iboxheaderBtn2 floatLeft">
                            <img src="img/list.png" alt="">
                            遗传门诊咨询记录单
                        </div>
                    </a>
                </div>
                <div class="table-responsive">
                    <table class="table table-striped">
                        <thead>
                        <tr>
                            <th>致病分类</th>
                            <th>性别</th>
                            <th>ID</th>
                            <th>Chr</th>
                            <th>start</th>
                            <th>End</th>
                            <th>Ref</th>
                            <th>Alt</th>
                            <th>Func.knownGene</th>
                            <th>操作</th>
                            <th>是否一代验证</th>
                            <th>备注</th>
                            <th>复诊</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>致病分类</td>
                            <td>性别</td>
                            <td>ID</td>
                            <td>Chr</td>
                            <td>start</td>
                            <td>End</td>
                            <td>Ref</td>
                            <td>Alt</td>
                            <td>Func.knownGene</td>
                            <td style="text-align: center">
                                <a href="dnaManageSiteDetail.html">
                                    <div class="detailBtn"><img src="img/look.png" alt="">查看位点详情</div>
                                </a>
                            </td>
                            <td style="text-align: center">
                                <div class="detailBtn" data-toggle="modal" data-target="#cardDeit"><img src="img/edit.png" alt="">修改</div>
                            </td>
                            <td style="text-align: center">
                                <div class="detailBtn" data-toggle="modal" data-target="#note"><img src="img/note.png" alt="">备注</div>
                            </td>
                            <td style="text-align: center">
                                <a href="dnaManageVisit.html">
                                    <div class="detailBtn"><img src="img/visit.png" alt="">复诊</div>
                                </a>
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div class="iBoxPagingBox">
                    <div class="iBoxPagingItem"><</div>
                    <div class="iBoxPagingItem on">1</div>
                    <div class="iBoxPagingItem">2</div>
                    <div class="iBoxPagingItem">3</div>
                    <div class="iBoxPagingItem">4</div>
                    <div class="iBoxPagingItem">5</div>
                    <div class="iBoxPagingItem">></div>
                </div>
            </div>
            <div class="tabContent">
                <div class="iboxTitle floatClear">
                    <div class="iboxTitleBg">样本信息</div>
                </div>
                <table class="iboxDetailTable table table-striped">
                    <thead>
                    <tr>
                        <th>ON号</th>
                        <th>NB号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>身份号</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>ON180138939</td>
                        <td>ON180138939</td>
                        <td>王芳芳</td>
                        <td>女</td>
                        <td>142322198807120032</td>
                    </tr>
                    </tbody>
                </table>
                <div class="iboxTitle floatClear">
                    <div class="iboxTitleBg">筛查结果列表</div>
                </div>
                <table class="iboxDetailTable table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>位置</th>
                        <th>基因</th>
                        <th>ALL/EAS</th>
                        <th>核苷酸/氨基酸改变</th>
                        <th>疾病名称</th>
                        <th>遗传模式</th>
                        <th>突变状态</th>
                        <th>变异等级</th>
                        <th>分类</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>1</td>
                        <td>6:44657</td>
                        <td>MYO6</td>
                        <td>9.37e-05/0.0008</td>
                        <td>c.2672C>T/P.Thr891Met</td>
                        <td>常染色体显性非综合征性耳聋22型</td>
                        <td>AD</td>
                        <td>杂合</td>
                        <td>意义不明变异</td>
                        <td>4</td>
                    </tr>
                    <tr>
                        <td>1</td>
                        <td>6:44657</td>
                        <td>MYO6</td>
                        <td>9.37e-05/0.0008</td>
                        <td>c.2672C>T/P.Thr891Met</td>
                        <td>常染色体显性非综合征性耳聋22型</td>
                        <td>AD</td>
                        <td>杂合</td>
                        <td>意义不明变异</td>
                        <td>4</td>
                    </tr>
                    </tbody>
                </table>
                <div class="iboxTitle floatClear" style="margin-top: .38rem;">
                    <div class="iboxTitleBg">(可能)致病变异详细解析</div>
                </div>
                <div style="font-size: .2rem;font-weight: bold;line-height: .6rem;color: #000;">c.qwe>p.qwe</div>
                <div class="des" style="margin-bottom: .3rem">
                    <div>基因描述：</div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                </div>
                <div class="des" style="margin-bottom: .3rem">
                    <div>变异解析：</div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                </div>
                <div class="des">
                    <div>疾病描述：</div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra justo commodo. Proin sodales pulvinar sic tempor. Sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam fermentum, nulla luctus pharetra vulputate, felis tellus mollis orci, sed rhoncus pronin sapien nunc accuan eget.
                </div>
            </div>
        </div>
    </div>
</div>
<!--备注模态-->
<div class="modal inmodal fade" id="note" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modalTitle">备注</div>
        <textarea class="modalTextarea" name="" id="" cols="30" rows="10"></textarea>
        <div class="manageEditBtnBox">
            <div class="manageEditBtn manageEditBtnSave">
                <img src="img/save.png" alt="">
                保存
            </div>
            <div class="manageEditBtn manageEditBtnRemove" data-dismiss="modal" aria-hidden="true">
                <img src="img/remove.png" alt="">
                取消
            </div>
        </div>
    </div>
</div>
<!--身份证模态-->
<div class="modal inmodal fade" id="cardDeit" tabindex="-1" role="dialog"  aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modalTitle">是否一代验证</div>
        <div style="text-align: center">
            <select class="modalSelect" name="" id="">
                <option value="">请选择</option>
            </select>
        </div>
        <div class="manageEditBtnBox">
            <div class="manageEditBtn manageEditBtnSave">
                <img src="img/success.png" alt="">
                确认
            </div>
            <div class="manageEditBtn manageEditBtnRemove" data-dismiss="modal" aria-hidden="true">
                <img src="img/remove.png" alt="">
                取消
            </div>
        </div>
    </div>
</div>
<!-- 全局js -->
<script src="js/jquery.min.js?v=2.1.4"></script>
<script src="js/bootstrap.min.js?v=3.3.6"></script>
<!-- iCheck -->
<script src="js/plugins/iCheck/icheck.min.js"></script>
<script src="js/global.js?v=3.3.6"></script>
<script>
    $(document).ready(function () {
        $('.i-checks').iCheck({
            checkboxClass: 'icheckbox_square-green',
            radioClass: 'iradio_square-green'
        });
//        tab切换事件
        $(".iboxheaderTab").click(function(){
            $(".iboxheaderTab").removeClass("on");
            $(this).addClass("on");
            $(".tabContent").removeClass("on").eq($(this).index()).addClass("on");
        });
    });
</script>
</body>
</html>
